<!--
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <div class="edit-page edit-container" :class="`edit-page-mode-${props.mode}`">
    <div class="edit-page-body">
      <div class="edit-page-content"><slot></slot></div>
    </div>
    <div class="edit-page-footer">
      <slot name="footer">
        <t-button v-if="props.confirm" @click="confirm">{{ props.confirm }}</t-button>
        <t-button v-if="props.cancel" theme="default" @click="close">{{ props.cancel }}</t-button>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup="EditContainerModal">
import { onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { EditContainerProps } from './types';
import { useTabsRouterStore } from '@/store';

export declare interface Props extends EditContainerProps {
  /**
   * 显示模式
   */
  mode?: 'default' | 'custom';
}

const tabsRouterStore = useTabsRouterStore();
const router = useRouter();
const route = useRoute();
const emits = defineEmits(['open', 'close', 'before-close', 'confirm']);
const props = withDefaults(defineProps<Props>(), {
  mode: 'default',
  confirm: '确定',
  cancel: '关闭',
});

watch(
  () => props.header,
  (v) => {
    if (v) {
      console.log(v);
    }
  },
);

/**
 * 打开
 * @param params
 */
function open(params: any) {
  if (route.path === props.path) {
    emits('open', params);
  } else {
    router.push({ path: props.path, query: params });
  }
}

/**
 * 强制关闭
 */
function forceClose() {
  router.back();
}

/**
 * 关闭
 * @param force
 */
function close() {
  emits('close');
  tabsRouterStore?.closeCurrentTabRouter?.(props.path);
  router.back();
}

function confirm() {
  emits('confirm');
}

onMounted(() => {
  if (route.path === props.path) {
    open(route.query);
  }
});

defineExpose({
  open,
  close,
  forceClose,
});
</script>

<style lang="less" scoped>
.edit-page {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  .edit-page-body {
    flex: 1;
    position: relative;
    background-color: var(--app-color-bg-primary);
  }
  .edit-page-content {
    position: absolute;
    inset: 0;
    overflow: auto;
  }
  .edit-page-footer {
    background-color: var(--app-color-bg-primary);
    padding: var(--app-space);
    display: flex;
    align-items: center;
    border-top: 1px solid var(--app-color-bd-primary);
  }
  // 默认显示模式
  &.edit-page-mode-default {
    .edit-page-content {
      inset: var(--app-space);
      background-color: var(--app-color-bg-primary);
    }
  }
  // 自定义显示模式
  &.edit-page-mode-custom {
    .edit-page-content {
      inset: 0;
    }
  }
}
</style>
